<template>
  <div style="width: 800px;" class="table">
    <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
      <thead style="background-color: #333F4F;">
        <tr :style="{ height: rowHeight + 'px'}">
          <th style="max-width: 60px;width: 60px;">NO.</th>
          <th style="max-width: 120px;width: 120px;">客户代码</th>
          <th style="max-width: 120px;width: 120px;">客户名称</th>
          <th style="max-width: 120px;width: 120px;">提货人</th>
          <th style="max-width: 120px;width: 120px;">车牌</th>
          <th style="max-width: 120px;width: 120px;">出货日</th>
          <th>目的地</th>
        </tr>
      </thead>
    </table>
    <div style="overflow: hidden;position: relative;top: -2px;" :style="{ height: (Math.min(maxRow, tableData.length) * rowHeight) + 'px' }">
      <table  border="0" cellpadding="0" cellspacing="0" style="width: 100%;" :style="{ transitionDuration: `${transitionDuration}ms`, transform: `translateY( ${translateX}px)`}">
        <tbody style="background-color: #333F4F;">
          <tr v-for="(item, index) in tableData" :key="index" :style="{ height: rowHeight + 'px'}">
            <td style="max-width: 60px;width: 60px;text-align: center;">{{ item.demo1 }}</td>
            <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo2 }}</td>
            <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo3 }}</td>
            <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo4 }}</td>
            <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo5 }}</td>
            <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo6 }}</td>
            <td style="text-align: center;">{{ item.demo7 }}</td>
          </tr>
          <template v-for="(item, index) in tableData" :key="index">
            <tr v-if="index < maxRow && tableData.length > maxRow" :style="{ height: rowHeight + 'px' }">
              <td style="max-width: 60px;width: 60px;text-align: center;">{{ item.demo1 }}</td>
              <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo2 }}</td>
              <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo3 }}</td>
              <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo4 }}</td>
              <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo5 }}</td>
              <td style="text-align: center;max-width: 120px;width: 120px;">{{ item.demo6 }}</td>
              <td style="text-align: center;">{{ item.demo7 }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
  <!-- <Scroll></Scroll> -->
  
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import { tableData } from './table';

import Scroll from './components/Scroll.vue'

const translateX = ref(0)
const transitionDuration = ref(500)

const maxRow = 8
const rowHeight = 48
const translateValue = rowHeight
const switeCount = tableData.length

onMounted(() => {
  setInterval(() => {
    if(tableData.length > maxRow) {
      translateX.value -= translateValue
      transitionDuration.value = 500
      if(translateX.value === -translateValue * switeCount) {
        setTimeout(() => {
          translateX.value -= translateValue
          transitionDuration.value = 0
          translateX.value = 0
        }, 600)
      }
    }
  }, 2000)
})

</script>

<style scoped>

.box div {
  width: 300px;
  height: 200px;
  background-color: aquamarine;
}

table {
  color: #fff;
}

.table {
  border: 1px solid #046DB8;
  margin: auto;
}

table {
  color: #fff;
}
td {
  border-top: 1px solid #046DB8;
  border-bottom: 1px solid #046DB8;
  border-left: 1px solid #046DB8;
}

th {
  border-left: 1px solid #046DB8;
}

tr th:nth-child(1) {
  border-left: 0 !important;
}


tr td:nth-child(1) {
  border-left: 0 !important;
}
</style>
